<template>
  <div style="height: 100%">
    <VueEternalLoading
      :load="infiniteHandler"
      position="top"
      :container="containerRef"
      v-model:is-initial="isInitial"
    >
      <template #loading>
        <div class="eternal-loading">
          <!-- <loading-outlined class="loading-icon" /> -->
          <div class="loading-txt">数据加载中</div>
        </div>
      </template>
      <template #no-more>
        <div class="eternal-more"></div>
      </template>
    </VueEternalLoading>
    <slot name="list" :list="messageList"></slot>
  </div>
</template>

<script setup>
import { VueEternalLoading } from "@ts-pro/vue-eternal-loading";
const isInitial = ref(true);
const list = ref([]);
const PAGE_SIZE = 5;
let page = 1;

const emit = defineEmits(["addMessage"]);

const props = defineProps({
  messageList: {
    type: Array,
    default: () => [],
  },
  containerRef: {
    type: Object,
    default: null,
  },
});
const getList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      if (page < 4) {
        resolve(
          Array.from({ length: 10 }, () => {
            return {
              name: "名字",
              content: "信息",
            };
          })
        );
      } else {
        resolve(
          Array.from({ length: 9 }, () => {
            return {
              name: "名字",
              content: "信息",
            };
          })
        );
      }
    },2000);
  });
};
const isLoading = ref(false);
const infiniteHandler = async ({ loaded, noMore }) => {
  console.log("触发");
  isLoading.value = true;
  try {
    let pageSize = 10;

    let list = await getList();

    if (list?.length >= pageSize) {
      page += 1;
      emit("addMessage", list);
      loaded();
    } else {
      noMore();
    }
    isLoading.value = false;
  } catch (err) {
    noMore();
    isLoading.value = false;
  }
};
</script>
<style lang="scss" scoped></style>
